import './style.css';
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { useState, useEffect } from "react";
import {getPartnerList} from "../../api";
import Marquee from 'react-fast-marquee';
const MultipeItem = () => {
    const [partner, setPartner] = useState([]);
    const getData = () => {
        getPartnerList().then((res)=>{
            setPartner(res.data.list)
        })
    }
    const [num, setNum]=useState(0);

    useEffect(() => {
        getData();
    }, [])
    useEffect(() => {
        setTimeout(()=>{
            if(num===-360){
                setNum(0);
            }else {
                setNum(num-1);
            }

           }, 100)

    })
    return (
        <div style={{overflowX:'hidden', overflowY:'hidden', height: 94}}>
            <div className="img-content animate"  style={{transform: `translateX(${num}px)`}}>
                {partner.map((item, _index) => (
                    <div className="single-img" key={_index}>
                        <img src={item.pics} className='company-picture' alt=""
                        />
                        <div className='company-single-name '>{item.name}</div>


                    </div>
                ))}
            </div>
            {/*{partner.map((item, _index) => (*/}
            {/*<div className="single-img" key={_index}>*/}
            {/*    <img src={item.pics} className='company-picture' alt=""*/}
            {/*    />*/}
            {/*    <div className='company-single-name '>{item.name}</div>*/}


            {/*</div>*/}
            {/*))}*/}

        </div>

    )
}

export default MultipeItem;